<template>
	<div>
		<div ref="biaotou">
			<el-form :model="formData" inline>
<!-- 				<el-form-item label="年份">
					<el-date-picker v-model="formData.dateYear" type="year" value-format="yyyy" placeholder="选择年份">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="月份" placeholder="选择月份">
					<el-select v-model="formData.dateMon" clearable>
						<el-option v-for="item in monthList" :value="item.value" :label="item.month"></el-option>
					</el-select>
				</el-form-item> -->
				<el-form-item label="期号">
<!-- 					<el-select v-model="formData.dateDay" clearable>
						<el-option value="01" label="第1期(10号)"></el-option>
						<el-option value="10" label="第2期(20号)"></el-option>
						<el-option value="20" label="第3期(30号)"></el-option>
					</el-select> -->
					<el-date-picker v-model="formData.qihaoDate" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择期号" @change="dateDayEvent"></el-date-picker>
				</el-form-item>
				<el-form-item label="工单状态">
					<el-select v-model="formData.orderStatus" clearable>
						<el-option v-for="item in ApprovalList" :value="item.Value" :label="item.Description"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="所属年份"  v-if="$store.state.user.roleid == '1'">
							<el-date-picker type="year" v-model="formData.settlementNumber" value-format="yyyy"  filterable clearable></el-date-picker>
						</el-form-item>
				<el-form-item>
					<el-button type="success" icon="el-icon-search" @click="getTableData">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="success" icon="el-icon-plus" @click="PayrollFormNewAdd.show = true">新建计划单</el-button>
				</el-form-item>
			</el-form>
		</div>
		<!-- <div ref="anniuzu" style="margin-bottom: 10px;">
			<el-button type="success" icon="el-icon-plus" @click="PayrollFormNewAdd.show = true">新建计划单</el-button>
			<el-tooltip class="item" effect="dark" content="年度开账将结算上一年度数据" placement="right">
				<el-button type="primary" icon="el-icon-s-check" @click="UpSettlementDialog">年度开账</el-button>
			</el-tooltip>
		</div> -->
		<div>
			<el-table :height="tableStyle+'px'" :data="payrollList" border  show-summary :summary-method="getSummaries" @select="tableSelectEvent"
				@select-all="tableSelectEvent">
				<el-table-column type="selection" width="40" align="center"></el-table-column>
				<el-table-column type="index" label="序号" width="50" align="center"
					:index="indexMethod"></el-table-column>
				<el-table-column label="工单编号" align="center" prop="LivingeBatch">
					<template slot-scope="scope">
						{{ LivingeBatchEvejnt(scope.row) }}
					</template>
				</el-table-column>
				<el-table-column label="总金额" align="center" prop="Money"></el-table-column>
				<el-table-column label="状态" align="center" prop="OrderStatus">
					<template slot-scope="scope">
						<p :style="{ 'color': getMessage(scope.row).color }">{{ getMessage(scope.row).message }}</p>
					</template>
				</el-table-column>
				<el-table-column label="开账状态" align="center" prop="Settlement">
					<template slot-scope="scope">
						<p v-if="scope.row.Settlement" style="color: #67C23A;">已开账({{ scope.row.SettlementNumber }}年度)
						</p>
						<p v-else></p>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" prop="OrderStatus">
					<template slot-scope="scope">
						<el-button type="primary" plain size="mini"
							@click="PayrollFormNewEvent(scope.row)">详情</el-button>
							<el-button plain type="primary" size="mini" @click="OpenSettlementDialog(scope.row)" >年度开账</el-button>
						<el-button type="warning" plain size="mini"
							@click="ExportLivingexpensesEvent(scope.row)">导出</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-row>
			<el-col :span="24" align="right">
				<el-pagination @size-change="getTableData" @current-change="getTableData"
					:current-page.sync="pagination.currentPage" :page-sizes="pagination.pagesizes"
					:page-size.sync="pagination.pagesize" layout="total, sizes, prev, pager, next, jumper"
					:total.sync="pagination.total">
				</el-pagination>
			</el-col>
		</el-row>

		<el-dialog :visible.sync="PayrollFormNew.show" :title="'工单号: '+PayrollFormNew.title" width="90%"
			:append-to-body='true' @close="getTableData()">
			<PayrollFormNew :tableRow="PayrollFormNew.tableRow"></PayrollFormNew>
		</el-dialog>

		<el-dialog :visible.sync="PayrollFormNewAdd.show" title="新建工资单" width="90%" :append-to-body='true'
			@close="getTableData()">
			<PayrollFormNewAdd :mainshow="PayrollFormNewAdd.show"></PayrollFormNewAdd>
		</el-dialog>

		<el-dialog append-to-body title="提示" :visible.sync="kaizhangDialog.show" width="30%"
			@close="dialogVisibleEvent">
			<div style="display: flex;flex-direction: column;gap: 10px;">
				<span>你确定要开账此选择吗?</span>
				<div>
					开帐年份：<el-date-picker v-model="kaizhangDialog.SettlementNumber" type="year" value-format="yyyy"
						placeholder="选择年份" @change="SettlementNumberEvent"></el-date-picker>
				</div>
				<div v-if="CheckSettlementResult.StatusCode == 500 && CheckSettlementResult.Message!=''">
					<p style="color: #E6A23C;margin:5px 0px !important; ">{{ CheckSettlementResult.Message }}</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleEvent">取 消</el-button>
				<el-button type="primary" @click="IsUpSettlementHandlerNew(false)">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		Message,
		Switch
	} from 'element-ui'
	import * as publicjs from "../../../../public/Scriput/Public"
	import dayjs from 'dayjs'
	import PayrollFormNew from './PayrollFormNew.vue'
	import PayrollFormNewAdd from './PayrollFormNewAdd.vue'
	export default {
		name: 'payrollRealityList',
		components: {
			PayrollFormNew,
			PayrollFormNewAdd
		},
		data() {
			return {
				monthList: [{
						month: "1月份",
						value: '01'
					},
					{
						month: "2月份",
						value: '02'
					},
					{
						month: "3月份",
						value: '03'
					},
					{
						month: "4月份",
						value: '04'
					},
					{
						month: "5月份",
						value: '05'
					},
					{
						month: "6月份",
						value: '06'
					},
					{
						month: "7月份",
						value: '07'
					},
					{
						month: "8月份",
						value: '08'
					},
					{
						month: "9月份",
						value: '09'
					},
					{
						month: "10月份",
						value: '10'
					},
					{
						month: "11月份",
						value: '11'
					},
					{
						month: "12月份",
						value: '12'
					},
				],
				formData: {
					qihaoDate:'',
					dateDay: '',
					dateMon: '',
					dateYear: '',
					orderStatus: '',
					settlementNumber:''
				},
				payrollList: [],
				//分页数据绑定
				pagination: {
					currentPage: 1,
					pagesizes: [10, 50, 100, 300, 500],
					pagesize: 10,
					total: 0
				},
				PayrollFormNew: {
					show: false,
					tableRow: {},
					title: '',
				},
				PayrollFormNewAdd: {
					show: false,
					title: '',
				},
				ApprovalList: [],
				tableSelectRows: [],
				kaizhangDialog: {
					show: false,
					SettlementNumber: '',
					clickrow:[],
				},
				CheckSettlementResult: {
					Status: true,
					Message: '',
					StatusCode: 200
				},
				tableStyle:500,
			}
		},
		created() {
			publicjs.http(this.$http, this.$message)
			this.GetLivingOrderStateResponse()
		},
		mounted() {
			this.$nextTick(() => {
				this.getTableData()
			})
			window.addEventListener('resize',()=>{
				this.tableHeightJiSuan()
			})
		},
		methods: {
			//表格序号
			indexMethod(index) {
				return index + 1
			},
			//页面初始数据获取
			getTableData() {
				console.log(1234555);
				this.$http.post('Livingexpenses/GetLivingexpenses', {
					...this.formData,
					pageSize: this.pagination.pagesize,
					pageIndex: this.pagination.currentPage,
				}).then(res => {
					const {
						StatusCode,
						Data,
						TotalCount
					} = res.data || 0
					if (StatusCode == 200) {
						this.payrollList = Data
					} else {
						this.payrollList = []
						this.$message.warning('获取项目收方工资单失败,请重试!')
					}
					this.pagination.total = TotalCount
					this.tableHeightJiSuan()
				})
			},
			LivingeBatchEvejnt(row) {
				const {
					LivingeBatch
				} = row || ''
				var reg = /-/ig;
				let newvalue = LivingeBatch.replace(reg, '')
				return newvalue
			},
			//查看详情
			PayrollFormNewEvent(row) {
				this.PayrollFormNew.show = true
				this.PayrollFormNew.tableRow = row
				this.PayrollFormNew.title = this.LivingeBatchEvejnt(row)
			},
			//导出excel
			ExportLivingexpensesEvent(row) {
				this.$http.post('Livingexpenses/ExportLivingexpenses', {
					livingeId: row.Id
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						//文件下载
						publicjs.DownLoadFile({
							...Data
						})
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//获取审批枚举类型
			GetLivingOrderStateResponse() {
				this.$http.post('Livingexpenses/GetLivingOrderStateResponse').then(res => {
					const {
						StatusCode,
						Data
					} = res.data || 0
					if (StatusCode == 200) this.ApprovalList = Data
				})
			},
			getMessage(row) {
				let result = {
					message: '',
					color: 'black'
				}
				let index = this.ApprovalList.findIndex(x => x.Value == row.OrderStatus)
				if (index > -1) result.message = this.ApprovalList[index].Description
				result.color = row.OrderStatus == 0 ? '#E6A23C' : row.OrderStatus == 1 ? '#409EFF' : '#67C23A'
				return result
			},
			//表格选择
			tableSelectEvent(values, row) {
				this.tableSelectRows = values
			},
			//时间选择事件
			SettlementNumberEvent(value) {
				if (value == '') return
				this.$http.post('Livingexpenses/CheckSettlement', {
					settlementNumber: value,
				}).then(res => {
					this.CheckSettlementResult = res.data
				})
			},
			//修改已经扎帐订单,请谨慎操作
			UpSettlementDialog() {
				if (this.tableSelectRows.length == 0) {
					this.$message.warning('请选择需要年度开账的数据!')
					return
				}
				if (this.tableSelectRows.length > 1) {
					this.$message.warning('年度开账数据只能存在一条!')
					return
				}
				this.kaizhangDialog = {
					show: true,
					SettlementNumber: '2025',
				}
			},
			//点击开账按钮，打开开账对话框页面
			OpenSettlementDialog(row) {
				this.kaizhangDialog = {
					show: true,
					SettlementNumber: '2025',
					clickrow:row,
				}
			},
			//弹框关闭
			dialogVisibleEvent() {
				this.kaizhangDialog = {
					show: false,
					SettlementNumber: ''
				}
				this.CheckSettlementResult = {
					Message: '',
					StatusCode: 200
				}
			},
			//表格数据合集
			getSummaries(param) {
				const {
					columns,
					data
				} = param;
				const sums = [];
				columns.forEach((column, index) => {
					if (index === 0) {
						sums[index] = '总价';
						return;
					}
					const values = data.map(item => Number(item[column.property]));
					if(index == 3){
						if (!values.every(value => isNaN(value))) {
							sums[index] = values.reduce((prev, curr) => {
								const value = Number(curr);
								if (!isNaN(value)) {
									let sum =  parseFloat(prev)  + parseFloat(curr)
									return sum.toFixed(2);
								} else {
									return prev.toFixed(2);
								}
							}, 0);
							sums[index] += index!=7?' 元':'';
						} else {
							sums[index] = '';
						}						
					}
				});
				return sums;
			},
			//提交新开账数据
			IsUpSettlementHandler() {
				this.$http.post('Livingexpenses/SetSettlement', {
					settlementNumber: this.kaizhangDialog.SettlementNumber,
					orderId: this.tableSelectRows[0].Id  
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('年度开账成功!')
						this.dialogVisibleEvent()
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//单独提交新开账数据
			IsUpSettlementHandlerNew() {
				console.log(1234);
				if(this.kaizhangDialog.SettlementNumber==""||this.kaizhangDialog.SettlementNumber==null)
				{
					this.$message.warning('开账年份不能为空，请选择开账年份！')
					return;
				}
				var row=this.kaizhangDialog.clickrow;
				this.$http.post('Livingexpenses/SetSettlement', {
					settlementNumber: this.kaizhangDialog.SettlementNumber,
					orderId: row.Id,
					projectid:row.ProjectId
				}).then(res => {
					const {
						StatusCode,
						Data,
						Message
					} = res.data || 0
					if (StatusCode == 200) {
						this.$message.success('年度开账成功!')
						this.dialogVisibleEvent()
						this.getTableData()
					} else {
						this.$message.warning(Message)
					}
				})
			},
			//表格高度计算
			tableHeightJiSuan(){
				//this.tableStyle = document.body.clientHeight - this.$refs.biaotou.clientHeight - this.$refs.anniuzu.clientHeight - 128
				this.tableStyle = document.body.clientHeight - this.$refs.biaotou.clientHeight - 128
			},
			//期号变更
			dateDayEvent(value){
				if(value == '' || value ==null){
					this.formData.dateYear = ''
					this.formData.dateMon = ''
					this.formData.dateDay = ''
				} else{
					let dates = value.split('-')
					this.formData.dateYear = dates[0]
					this.formData.dateMon = dates[1]
					this.formData.dateDay = dates[2]					
				}
			},
		}
	}
</script>

<style scoped>
</style>